import React from 'react';
import './App.less'
import { Layout, Menu} from 'antd';
import {Link} from 'react-router-dom'

const { Header, Content,  Sider } = Layout;


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {collapsed: false,menuindex:'1'};
  }

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });

  };
  componentDidMount=()=>{

  }
  render() {
    return (
      <Layout style={{minHeight:700}}>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
            <div className="headcon">
                <span>录入监控平台</span>
            </div>
        
            
            <Menu theme="dark"
                  mode="inline"
                  defaultSelectedKeys={ [this.state.menuindex]}
                  style={{ borderRight: 0 }}
            >  
                <Menu.Item key="1">
                    <Link to='/' >
                     {/*  <Icon type="pie-chart" /> */}
                      <span>区域学生数据统计</span>
                    </Link>
                </Menu.Item>
                <Menu.Item key="2">
                      <Link to='/account' >
                     {/*    <Icon type="schedule" /> */}
                        <span>机构账号查询</span>
                      </Link>
                </Menu.Item>
                <Menu.Item key="3">
                    <Link to='/state' >
                    {/*   <Icon type="tool" /> */}
                      <span>机构审核状态查询</span>
                    </Link>
                </Menu.Item>
              
                <Menu.Item key="4">
                     <Link to='/reaccount' >
                     {/*    <Icon type="credit-card" /> */}
                        <span>区域账号查询</span>
                     </Link>
                </Menu.Item>
                <Menu.Item key="5">
                     <Link to='/info' >
                     {/*    <Icon type="home" /> */}
                        <span>学生信息查询</span>
                     </Link>
                </Menu.Item>
               
             </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }}>
          {/*   <Icon
              className="trigger"
              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={this.toggle}
            />
             <span  style={{float:'right',paddingRight:'20px',fontSize: '20px'}}></span> */}
          </Header>
          <Content
            style={{
              margin: '24px 16px',
              padding: 24,
              background: '#fff',
              minHeight: 400,
            }}
          >
             {this.props.children}
          
          </Content>
        </Layout>
      </Layout>
    );
  }
}

export default App;